<%-- 
    Document   : index
    Created on : 12/10/2013, 22:18:12
    Author     : rosana
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page session="false"%> 
<!DOCTYPE html>
<html>
    <head>        
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <title>Clínica Médica - Sua saúde em primeiro lugar</title>        
    </head>
    <body>          
        <div class="container">            
            <jsp:include page="cabecalho.jsp" flush="false" />
            <div class="content">
                <script type="text/javascript">
                    $(function() {
                        $('#menu_tabs a').click(function(e) {
                            e.preventDefault();
                            $(this).tab('show');
                        });
                    });
                </script>
                <ul class="nav nav-tabs" id="menu_tabs">
                    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                    <li><a href="#consultar_horario" data-toggle="tab">Consultar Horário</a></li>
                    <li><a href="#localizacao" data-toggle="tab">Localização</a></li>
                    <li><a href="#contato" data-toggle="tab">Contato</a></li>
                    <li><a href="#fazer_login" data-toggle="tab">Fazer Login</a></li>
                </ul>
                <div class="tab-content panel panel-default home-panel">
                    <div id="home" class="tab-pane active">
                        <h3>Nossa Clínica trabalha há 15 anos para lhe oferecer segurança e tranquilidade na hora de escolher os melhores profissionais para cuidar de sua saúde.</h3><br>
                        <h4>Horário de atendimento:</h4>
                        <p>De segunda à sexta das 7h30 às 20h00</p><br>
                        <h4>Especialidades:</h4>
                        <ul class="especialidades">
                            <li>Clínico Geral</li>
                            <li>Ortopedista</li>
                            <li>Traumatologista</li>
                            <li>Oftalmologista</li>
                            <li>Neurologista</li>
                        </ul>
                    </div>
                    <div id="consultar_horario" class="tab-pane">
                        <h3>Consultar Horário</h3>
                        <p>Selecione o médico e o período que deseja para verificar os horários disponíveis:</p><br>
                        <form method="post" action="#">
                            <div class="row">
                                <div class="col-md-1">
                                    <label for="escolhe-medico">Médico:</label>        
                                </div>
                                <div class="col-md-2">
                                     <select class="select-text" id="escolhe-medico" required>
                                        <option>Selecione</option>
                                        <option>Médico 1</option>
                                        <option>Médico 2</option>
                                        <option>Médico 3</option>
                                        <option>Médico 4</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-1">
                                    <label class="escolher-horario" for="periodo-consulta">Período:</label>        
                                </div>
                                <div class="col-md-4">
                                    <input class="input-text escolhe-horario" type="date" value="De" name="periodo-inicio">                    
                                    <input class="input-text escolhe-horario" type="date" value="Até" name="periodo-fim">
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-4">
                                    <input class="input-submit pull-right button-ok" type="submit" value="Pesquisar" >     
                                </div>           
                            </div>                            
                        </form>
                    </div>
                    <div id="localizacao" class="tab-pane">
                        <h3>Localização</h3>
                        <p>Rua das Clínicas, 1234<br>
                            Fone: 51 3333-3333
                        </p>
                        <img src="img/mapa.png" alt="Localização" />
                    </div>
                    <div id="contato" class="tab-pane">
                        <h3>Contato</h3>
                        <p>Preencha o formulário a seguir para entrar em contato:</p>
                        <br>
                       <form method="POST" action="#">
                            <div class="row">
                                <div class="col-md-1">
                                    <label for="nome">Nome:</label>        
                                </div>
                                <div class="col-md-2">
                                   <input class="input-text" id="nome" type="text" size="30" name="" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-1">
                                    <label for="email">E-mail:</label>        
                                </div>
                                <div class="col-md-2">
                                    <input class="input-text" id="email" type="text" size="30" name="" required>
                                </div>
                            </div>    
                            <div class="row">
                                <div class="col-md-1">
                                    <label for="msg">Mensagem:</label>        
                                </div>
                                <div class="col-md-2">
                                   <textarea class="text-area" id="msg" name=""></textarea>                               
                                </div>
                            </div> 
                            <div class="row">
                                <div class="col-md-4">
                                    <input class="input-submit pull-right button-entrar" type="submit" value="Enviar">
                                </div>
                            </div>
                        </form> 
                    </div>
                    <div id="fazer_login" class="tab-pane">
                        <h3>Login</h3>
                        <p>Para fazer o login, informe os dados abaixo:</p><br>
                        <form method="POST" action="FrontController">
                            <div class="row">
                                <div class="col-md-1">
                                    <label for="login">Login:</label>        
                                </div>
                                <div class="col-md-2">
                                   <input class="input-text" id="login" type="text" size="30" name="Login" required>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-1">
                                    <label for="senha">Senha:</label>        
                                </div>
                                <div class="col-md-2">
                                   <input class="input-text" id="senha" type="password" size="30"name="Senha" required>
                                </div>
                            </div>    
                            <input type="hidden" name="servlet" value="login">
                             <div class="row">
                                <div class="col-md-4">
                                    <input class="input-submit pull-right button-entrar" type="submit" value="Entrar">
                                </div>
                             </div>
                        </form> 
                    </div>
                </div>
            </div>  
            <jsp:include page="rodape.jsp" flush="true" />   
        </div>        
    </body>
</html>
